<template>
    <view class="container">
        <sc-navbar back title="合作医院"></sc-navbar>
        <sc-view padding="18rpx 35rpx">
            <glo-search @search="handleSearch"></glo-search>
        </sc-view>
        <up-swipe-action>
            <up-swipe-action-item :options="options" v-for="item in 5" :key="item" :index="item"
                @click="handleClick('删除', item)">
                <view class="container-item">
                    <sc-flex ai="center" col-gap="17">
                        <sc-image src="/static/imgs/empty.png" width="75" height="75" circle></sc-image>
                        <sc-flex direction="t" row-gap="">
                            <glo-title title="武汉市第三医院"></glo-title>
                            <sc-text text="湖北省武汉市武昌区" size="22" color="#a5a5a5"></sc-text>
                        </sc-flex>
                    </sc-flex>
                    <up-icon name="arrow-right"></up-icon>
                </view>
            </up-swipe-action-item>
        </up-swipe-action>
        <sc-view padding="40rpx 19rpx">
            <sc-button type="assist" text="新增医院" width="100%" height="67" font-size="30rpx"></sc-button>
        </sc-view>
        <glo-modal v-model="showDelete" title="确定要删除该医院吗?" content="如果删除，将清空该医院所有科室及联系人"
            @confirm="handleConfirm"></glo-modal>
    </view>
</template>

<script setup>
const showDelete = ref(false)
const options = reactive([{
    text: '删除',
    style: {
        width: '178rpx',
        backgroundColor: '#FF5050',
        fontSize: '34rpx'
    }
}]);

const handleSearch = (value) => {
    console.log(value)
}

const handleConfirm = () => {
    console.log('确认')
}

const handleClick = (name, index) => {
    console.log("🚀 >>> index:", index)
    console.log("🚀 >>> name:", name)
    if (name === '删除') {
        showDelete.value = true
    }
}
</script>

<style lang="scss" scoped>
.container-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 35rpx 0 38rpx;
    height: 105rpx;
    border-bottom: 1px solid #EDEDED;
}
</style>